<template>
    <div class="activeScene">
        <el-form :rules="rules" ref="form" :model="orderInfo">
            <el-form-item prop="startTime">
                <div class="item">
                    <div class="label">活动持续时间：</div>
                    <div class="name">
                        <el-date-picker type="datetime" style="width:200px;" placeholder="请选择开始时间"
                                        v-model="orderInfo.startTime" @change="checkDate"
                                        show-word-limit></el-date-picker>
                        &nbsp;&nbsp;至&nbsp;&nbsp;
                        {{new Date(Number(orderInfo.startTime?orderInfo.startTime:new Date()) +
                        this.vipInfo.sceneTime*60*60*1000)|datetimeFilter}}
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="item">
                    <div class="label">活动支持人数：</div>
                    <div class="name people">
                        <span>{{ Number(orderInfo.peopleNum) + vipInfo.maxPerson}}</span> &nbsp;&nbsp; = &nbsp;&nbsp;{{vipInfo.maxPerson}}&nbsp;<span
                            class="tip">(免费人数)</span>+
                        <el-input style="width: 100px" maxLength="5" @input.native="inputNumber"
                                  v-model="orderInfo.peopleNum"></el-input>
                        <span class="tip">(收费人数)</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="item">
                    <div class="label">活动使用功能：</div>
                    <div class="name spans">
                        <span style="width: 20px">{{sceneInfo.funcNum}}</span>
                        <span v-if="vipInfo.moduels!==-1&&sceneInfo.funcNum>vipInfo.moduels" class="tip">超过免费使用功能数量{{vipInfo.moduels-sceneInfo.funcNum }}个</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="item">
                    <div class="label">活动人数支持费用：</div>
                    <div class="name">
                        ￥&nbsp;{{(orderInfo.peopleNum)*vipInfo.personPrice}}
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="item">
                    <div class="label">活动功能费用：</div>
                    <div class="name spans">
                        <span style="margin-right: 20px">￥&nbsp;{{vipInfo.moduels>0&&sceneInfo.funcNum>vipInfo.moduels?(sceneInfo.funcNum - vipInfo.moduels)*vipInfo.modulePrice:0}}</span>
                        <span class="tip" v-if="sceneInfo.funcNum>vipInfo.moduels">超过免费使用功能数量{{Math.abs(sceneInfo.funcNum - vipInfo.moduels)}}个，需支付100元/功能的使用费</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="item">
                    <div class="label">发布费用：</div>
                    <div class="name">
                        <span style="margin-right: 20px">￥&nbsp;{{vipInfo.spurplusTimes>0?0:vipInfo.spurplusTimes - 1===-2?0:vipInfo.publishPrice}}</span>
                        <span class="tip">剩余次数：{{vipInfo.spurplusTimes - 1=== -2 ?'无限制': vipInfo.spurplusTimes + ' 次' }}</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="item">
                    <div class="label">优惠码：</div>
                    <div class="name coupons">
                        <el-input type="text" v-model="coupons.code" @blur="getCoupons" clearable
                                  @clear="getCoupons"></el-input>
                        <el-button readonly :loading="searchLoading" type="text" style="color: #555"
                                   icon="el-icon-refresh-right">{{searchLoading?'正在查找':'查找'}}
                        </el-button>
                        <div v-if="coupons.amount>0">优惠金额：￥{{coupons.amount}}</div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="item">
                    <div class="label">费用合计：</div>
                    <div class="name">
                        <span style="color: #F3AE1B;font-size: 36px">￥&nbsp;{{totalPrice}}</span>
                    </div>
                </div>
            </el-form-item>
            <div class="notice">
                <div>
                    注：
                    <div>1.一旦发布将视为“正式活动”，付费功能将视为已被使用，不可退费。</div>
                    <div>2.付费功能将仅限于本活动使用，不可转移至其他活动。</div>
                    <div>3.如果删除“正式活动”，付费功能将视为已被使用，不可退费。</div>
                    <div>4.其他活动需要使用付费功能，请重新购买或升级会员等级。</div>
                </div>
            </div>
            <div class="buttons">
                <!--<el-button type="info" @click="closeModal">取消</el-button>-->
                <el-button type="primary" @click="activeSceneInfo">支付并发布</el-button>
            </div>
        </el-form>
        <el-dialog :visible="confirmModal" title="确认发布" custom-class="definedModal" append-to-body
                   @close="confirmModal=false">
            <div class="acConfirm">
                <div class="confirm-title">活动发布后将会清空以下数据</div>
                <div class="clear">
                    清除数据包括：
                    <div>·当前活动签到人员信息（签到人数归零)</div>
                    <div>·当前活动互动结果数据（弹幕消息、抽奖结果、投票结果）</div>
                </div>
                <div class="clear">不会清除活动设置信息。</div>
                <div style="text-align: center;margin-top: 20px">
                    <!--<el-button style="width: 100px" type="info" @click="confirmModal=false">取消</el-button>-->
                    <el-button style="width: 100px" type="primary" @click="confirm">确认发布</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        name: 'activeScene',
        components: {},
        props: {
            closeModal: {
                required: true,
                type: Function,
            },
            getSceneList: {},
            scene: {
                required: true,
            },
        },
        data() {
            return {
                vipInfo: {},
                sceneInfo: {
                    funcNum: 0,
                    name: '',
                },
                times: 10,
                orderInfo: {
                    startTime: new Date(),
                    peopleNum: 0,
                },
                rules: {
                    startTime: [
                        { required: true, message: '请输入活动开始时间', trigger: 'change' },
                    ],
                },
                picLibraryVisibly: false,
                sfxLibraryVisibly: false,
                searchLoading: false,
                coupons: { amount: 0, code: '' },
                confirmModal: false,
            };
        },
        mounted() {
            this.vipInfo = JSON.parse(sessionStorage.getItem('member'));
            this.initInfo();
        },
        computed: {
            totalPrice() {
                let peoplePrice = parseInt(this.orderInfo.peopleNum) * this.vipInfo.personPrice;
                let funcPrice = this.vipInfo.moduels > 0 && this.sceneInfo.funcNum > this.vipInfo.moduels ? (this.sceneInfo.funcNum - this.vipInfo.moduels) * this.vipInfo.modulePrice : 0;
                let timesPrice = this.vipInfo.spurplusTimes > 0 ? 0 : this.vipInfo.spurplusTimes - 1 === -2 ? 0 : parseInt(this.vipInfo.publishPrice);
                let couponsCut = this.coupons.amount;
                let total = peoplePrice + funcPrice + timesPrice;
                total = total - couponsCut > 0 ? total - couponsCut : 0;
                return total;
            },
        },
        methods: {
            activeSceneInfo() {
                this.$refs.form.validate(res => {
                    if (res) {
                        this.confirmModal = true;
                    } else {
                        this.$message.info('请完善场景信息');
                        return false;
                    }
                });

            },
            confirm() {
                let peoplePrice = parseInt(this.orderInfo.peopleNum) * this.vipInfo.personPrice;
                let funcPrice = this.vipInfo.moduels > 0 && this.sceneInfo.funcNum > this.vipInfo.moduels ? (this.sceneInfo.funcNum - this.vipInfo.moduels) * this.vipInfo.modulePrice : 0;
                let timesPrice = this.vipInfo.spurplusTimes > 0 ? 0 : this.vipInfo.spurplusTimes - 1 === -2 ? 0 : parseInt(this.vipInfo.publishPrice);
                let couponsCut = this.coupons.amount;
                let total = peoplePrice + funcPrice + timesPrice;
                let finalPrice = total - couponsCut > 0 ? total - couponsCut : 0;
                let param = {
                    title: '场景发布：' + this.sceneInfo.name,
                    type: 1,
                    totalPrice: total,
                    cutPrice: this.coupons.amount,
                    cutCode: this.coupons.code,
                    finalPrice: finalPrice,
                    detail: {
                        startTime: Date.parse(this.orderInfo.startTime),
                        endTime: Date.parse(this.orderInfo.startTime) + this.vipInfo.sceneTime * 60 * 60 * 1000,
                        payPersonNum: this.orderInfo.peopleNum,
                        payPersonPrice: peoplePrice,
                        totalPersonNum: this.orderInfo.peopleNum + this.vipInfo.maxPerson,
                        modulePayPrice: funcPrice,
                        publishPayPrice: timesPrice,
                        sceneId: this.scene.sceneId,
                    },
                };
                this.$api.post('/order/add', param, success => {
                    if (success) {
                        this.$bus.$emit('orderPay', success);
                        this.closeModal();
                    } else {
                        this.$message.success('发布成功');
                        this.$bus.$emit('refreshMemberInfo');
                        this.getSceneList();
                        this.closeModal();
                    }
                }, fal => {
                    this.$message.error(fal);
                });
            },
            getCoupons() {
                this.searchLoading = true;
                if (this.coupons.code.length > 1) {
                    this.$api.get('/coupons', { code: this.coupons.code }, success => {
                        this.coupons.amount = success;
                        this.searchLoading = false;
                    }, fal => {
                        this.$message.error(fal);
                        this.coupons.amount = 0;
                        this.searchLoading = false;
                    });
                } else {
                    this.coupons.amount = 0;
                    this.searchLoading = false;
                }
            },
            initInfo() {
                let sceneInfo = this.scene;
                if (sceneInfo.moduleJson && JSON.parse(sceneInfo.moduleJson)) {
                    this.sceneInfo.funcNum = JSON.parse(sceneInfo.moduleJson).length;
                    this.sceneInfo.name = sceneInfo.name;
                }
            },
            checkDate() {
                if (Date.parse(this.orderInfo.startTime) <= +new Date()) {
                    this.orderInfo.startTime = +new Date();
                    this.$message.info('请选择当前日期的之后的时间，作为场景开始时间');
                }
            },
            inputNumber() {
                this.orderInfo.peopleNum = this.orderInfo.peopleNum.replace(/[^0-9]/g, '');
            },
        },
    };
</script>

<style lang="scss" scoped>
    .activeScene {
        /deep/ .el-form-item__error {
            padding-left: 155px;
        }
        .item {
            margin: 10px 0;
            display: flex;
            .label {
                margin-right: 10px;
                width: 140px;
                text-align: right;
            }
            .name {
                width: calc(100% - 150px);
            }

        }
        .buttons {
            text-align: right;
            padding: 20px;
            button {
                width: 150px;
                background: #FA1919;
                border-radius: 20px;
                border: none;
                transition: all .3s;
                top: 0;
            }
            button:hover {
                top: -2px;
                box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.20);
                background: #ff3535;
                color: #fefefe;
            }
        }
        .coupons {
            @include flex;
            div {
                width: 150px;
            }
            button {
                margin: 0 20px 0 5px;
                transition: all .3s;
                width: 80px;
            }
        }
    }

    .notice {
        padding: 20px 10px;
        color: #666;
        div {
            padding: 5px 20px;
        }
    }

    .tip {
        color: #999;
        font-size: 12px;
    }

    /deep/ .acConfirm {
        color: #333333;
        .confirm-title {
            text-align: center;
            padding: 15px;
            font-size: 18px;
            font-weight: bold;
        }
        .clear, .clear div {
            padding: 5px 10px;
        }
    }

</style>